import React, { useState, useEffect } from 'react';

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    id: parseInt(Math.random() * 1e4)
  }
}

const Line = () => {
  const [arr, setArr] = useState([]);
  const array=[1,2,3]
  useEffect(() => {
    addKeyFun(arr)
  }, [arr.length])
  // 注意监听arr.length 而不是arr 否则死循环

  return (
    <div>
      <button onClick={addObj}>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.id}`}> {item.name}</div>)
      }
    </div>
  )

  // 点击+5条数据
  function addObj() {
    for (let i = 0; i < array.length; i++) {
      setArr(i => [...i, obj()]); //一定要使用函数方式
    }
  }

  // 追加参数
  function addKeyFun(data) {
    data.map((ii, idx) => {
      setArr(i => {
        return [...i]
      });
    })
  }
}

export default Line;